<template>
  <div class="container" style="margin-top: 45px;font-size: 16px;color: #171920">
    <div class="bg-color-white" style="height: 84px;">
      <div class="flex-start-center " style="padding: 20px;border-bottom: 1px solid #EBEBEB;">
        <div style="width: 118px;height: 100%;font-weight:700;">{{'战略合作企业'}}</div>
        <div style="width: auto;height: 100%" >
          <div class="flex-start-center">
            <div style="height: 40px;"></div>
            <div v-for="item in data.imageUrlList" class="flex-all-center"
                 style="width: auto;height: 43px;padding-left: 20px;margin-right: 20px;border-left: 1px solid #f2f2f2">
              <img :src="item" alt="" style="width: 100%;height: 100%">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bg-color-white">
      <div style="padding: 30px 20px 15px;font-weight:700;">{{'友情链接'}}</div>
      <div class="flex-start-center normal-text" style="padding: 0 20px 20px">
            <span v-for="(item,index) in data.friendlyLinkList" class="theme-hover" @click="clickToLink(item)">{{item.name}}
            <span class="ornament-line" v-if="index < data.friendlyLinkList.length-1"></span></span>
<!--        <span class="normal-text theme-hover">{{'友情互换>>'}}</span>-->
      </div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, reactive} from 'vue';
import {listCompany, listFriendlyLink} from '../../api/home.js'

const data = reactive({
  imageUrlList: [],
  friendlyLinkList: []
})
//跳转
function clickToLink(item) {
    if (item.url) {
      window.open(item.url)
    }
}
const initData = () => {
  initCompany()
  initFriendlyLink()
}
const initCompany = () => {
  data.imageUrlList = []
  listCompany({}, (res) => {
    data.imageUrlList = res.data.map(item => {
      return item.logoUrl
    })
  })
}
const initFriendlyLink = () => {
  data.friendlyLinkList = []
  listFriendlyLink({}, (res) => {
    data.friendlyLinkList = res.data
  })
}
onMounted(() => {
  initData()
})
</script>

<style lang="scss" scoped>
.normal-text {
  font-size: 12px;
  color: #9598a2;
  font-weight: 400;
}
.ornament-line {
  margin: 0 5px;
  border-left: 1px solid #9598A2;
  font-size: 10px
}
</style>
